<template>
  <a-form-model
    ref="formComp"
    :model="formData"
    :rules="rules"
    layout="horizontal"
    class="AsteriskAfter newEditStyle"
    style="width: 100%;"
  >
    <a-row v-if="showTitle">
      <a-col :md="24" :sm="24">
        <a-form-model-item>
          <p>{{ formData.name || '任务名称' }}</p>
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :md="24" :sm="24">
        <a-form-model-item :label="$t('uploadFile')">
          <div class="withUploadArrowInputBox">
            <a-input placeholder  v-model="fileName" @keydown="handleRemove">
            </a-input>
            <a-upload :file-list="[]" :remove="handleRemove" :before-upload="beforeUpload" :customRequest="doUpload">
              <a-button :loading="uploading" :disabled="!Boolean(managePerms.audit.edit)">
                <a-icon type="upload" v-show="!uploading" />
              </a-button>
            </a-upload>
          </div>
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :md="24" :sm="24">
        <a-form-model-item :label="$t('remark')" prop="auditMessage">
          <custom-text-area
            @change="formData.auditMessage = $event"
            :val="formData.auditMessage"
            :rows="3"
            :max-len="200"
          ></custom-text-area>
        </a-form-model-item>
      </a-col>
    </a-row>
  </a-form-model>
</template>
<script>
import lodash from 'lodash'
import fileUploadApi from '@/api/modules/system/fileUpload'
import { verifyInitFormData } from '../config/form'
import SparkMD5 from 'spark-md5'
import { managePerms } from '@/config/permission/index'
import { checkTextLen } from '@/utils/validate'
import CustomTextArea from '@/components/CustomTextArea/index.vue'
export default {
  components: {
    CustomTextArea
  },
  props: {
    showTitle: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      managePerms,
      formData: lodash.cloneDeep(verifyInitFormData),
      rules: {
        auditMessage: [{ validator: checkTextLen(200) }]
      },
      uploading: false,
      fileName: ''
    }
  },
  created () {
  },
  methods: {
    doUpload (options) {
      this.uploading = true
      this.getChecksum(options.file).then(result => {
        const formData = new FormData()
        formData.append('file', options.file)
        fileUploadApi.uploadWholeFileToLocal(formData, { hashAlgorithm: 1, checksum: result, uploadType: 1 })
          .then(res => {
            this.formData.fileIds = [res.data]
            this.$message.success(this.$t('uploadedSuccessfully'))
            console.log(this.formData,'11111111')
          }).finally(() => {
            this.uploading = false
          })
      }).catch(err => {
        console.log(err)
      })
    },
    handleRemove (file) {
      this.fileName = ''
      this.formData.fileIds = []
    },
    // 检测文件大小10M以内
    beforeUpload (file) {
      const maxSize = 1024 * 1024 * 10
      if (file.size > maxSize) {
        const msg = this.$t('uploadLimit').replace('__SIZE__', '10M')
        this.$message.error(msg)
        return false
      }
      this.fileName = file.name
      return true
    },
    // 获取上传文件内容md5
    getChecksum (file) {
      return new Promise((resolve, reject) => {
        const blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice
        const spark = new SparkMD5.ArrayBuffer()
        const fileReader = new FileReader()
        fileReader.readAsArrayBuffer(blobSlice.call(file, 0, file.size))
        fileReader.onload = function (e) {
          spark.append(e.target.result)
          resolve(spark.end())
        }
        fileReader.onerror = function (err) {
          reject(err)
        }
      })
    },
    getFormData () {
      return new Promise((resolve, reject) => {
        this.$refs.formComp.validate(valid => {
          if (valid) {
            resolve(this.formData)
          } else {
            reject(valid)
          }
        })
      })
    },
    // 重置表单数据
    resetFormData () {
      this.fileName = ''
      this.formData = lodash.cloneDeep(verifyInitFormData)
    }
  }
}
</script>
<style lang="less">
.newSideWarp {
  .title {
    &.passTitle {
      color:#2BB080;
    }
    &.rejectTitle {
      color:#FF8762;
    }
  }
}
</style>
